<template>
  <div>
    <div class="title"></div>
    <div v-if="speed == true" class="container imgyi">
      <img :src="Detailspage.topImage.url" alt>
    </div>
    <section v-if="speed == true" class="pineCone containerS">
      <img :src="Detailspage.user.icon" >
      <span v-text="Detailspage.user.nick"></span>
      <img :src="attention" alt @click="attenTion">
    </section>
    <section class="containerS rule"></section>
    <section class="containerS share">
      <span>分享至：</span>
      <img
        class="-mob-share-weibo"
        src="http://www.songguolife.com/nuts/images/share_weibo.png"
        alt
      >
      <span><img @click="hearts" :src="heartImg" alt=""></span>
      <div id="share"></div>
    </section>
    <section class="containerS">
      <div class ="titles1"><p v-text="Detailspage.title"></p></div>
       <div class ="titles2"><p v-text="Detailspage.desc"></p></div>
        <div  v-for="(resource,index) in Detailspage.resource " :key="index">
            <div v-if="resource.name !=null" class="subjectImg"><img :src="resource.url" alt=""></div>
            <div  v-if="resource.txt  != null " class="subject"><p v-text="resource.txt "></p></div>
            <div v-if="resource.name ==null || resource.txt == null" class="blank"><div></div></div>
        </div>
          <span>分享至：</span>
        <img class="-mob-share-weibo microblog" src="http://www.songguolife.com/nuts/images/share_weibo.png">
      <span><img class="heart" @click="hearts" :src="heartImg" alt=""></span>
      <div id="share"></div>
      <img class="subjectImg" src="http://image.songguolife.com//weixinfooter@2x.png?imageslim" alt="">
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      Detailspage: {},
      speed: false,
      attention: "http://www.songguolife.com/nuts/images/pay_attention.png",
      heartImg:"http://www.songguolife.com/nuts/images/share_like_click.png",
      atten: false,
      heart:false
    };
  },
  props: ["roomid"],
  methods: {
    getActivity: function() {
      var _this = this;
      var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
      axios
        .get(
          API_Proxy + `http://www.songguolife.com/api/article/${this.roomid}`
        )
        .then(
          function(data) {
            console.log("请求成功");
            console.log(data);
            _this.Detailspage = data.data;
            _this.speed = true;
          },
          function(data) {
            console.log("请求失败");
            console.log(data);
          }
        );
    },

    attenTion: function() {
      this.atten = !this.atten;
      if (this.atten == true) {
        this.attention =
          "http://www.songguolife.com/nuts/images/already_pay_attention.png";
      } else {
        this.attention =
          "http://www.songguolife.com/nuts/images/pay_attention.png";
      }
    },
    hearts:function(){
      this.heart = !this.heart
      if(this.heart == true){
        this.heartImg = "http://www.songguolife.com/nuts/images/share_like_click.png"
      }else{
        this.heartImg = "http://www.songguolife.com/nuts/images/share_like.png"
      }
    }

  },
  mounted() {
    this.getActivity();
    var share = document.getElementById("share");
    console.log(share);
    var scr = document.createElement("script");
    scr.id = "-mob-share";
    scr.src =
      "http://f1.webshare.mob.com/code/mob-share.js?appkey=d95e499dc92689d0e26bf19efac81175";
    share.appendChild(scr);
  }
};
</script>

<style scoped>

.title {
  width: 80vw;
  height: 7vw;
  background: antiquewhite;
  margin: 0 auto;
}
.container {
  width: 70vw;
  margin: 0 auto;
  padding: 0;
}
.imgyi {
  margin-top: 3vw;
}
.imgyi img {
  width: 70vw;
  height: 30vw;
}
.containerS {
  width: 60vw;
  margin: 0 auto;
  padding: 0;
  /* border: 1px solid aqua; */
}
.pineCone {
  margin-top: 3vw;
}
.pineCone > span {
  color: #ff5722;
  font-size: 1vw;
  margin-left: 1vw;
}
.pineCone > img:nth-of-type(1) {
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
}
.pineCone > img:nth-of-type(2) {
  width: 4vw;
  height: 4vw;
  float: right;
}
.rule {
  width: 60vw;
  border-bottom: 1px rgb(94, 94, 94) solid;
  margin-top: 1vw;
}
.share img {
  width: 3vw;
  height: 3vw;
}
.microblog{
   width: 3vw;
  height: 3vw;
}

.subjectImg{
  width: 60vw;
}
.subjectImg img{
  width: 100%;
}
.blank{
  height: 2vw;
}
.heart{
  width: 3vw;
  height: 3vw;
}
.titles{
  text-align: center;
  color: black;
  font-size: 4vw;
}
.titles1{
  text-align: center;
    color: black;
  font-size: 3vw;
}
</style>
